<template>
	<view>
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed" :style="{
				height: $wanlshop.wanlsys().height + 'px', 
				paddingTop: $wanlshop.wanlsys().top + 'px',
				color: '#333333',
				backgroundColor: '#fff',
			}">
				<view class="action" @tap="$wanlshop.back(1)">
					<text class="wlIcon-fanhui1"></text>
				</view>
				<view class="content text-bold" :style="{top: $wanlshop.wanlsys().top + 'px'}">
					详情
				</view>
				<view class="action" @tap="$wanlshop.on('/pages/index')">
					<text class="iconfont icon-ipr_shouye text-bold" style="font-size: 44rpx;"></text>
				</view>
			</view>
		</view>

		<view class="banner">
			<u-swiper :list="bannerList" height="422" border-radius='0'></u-swiper>
		</view>
		<view class="intr">
			<view class="intrFlex">
				<view class="intrFlexItem">
					<view class="itemLeft">志愿者服务：</view>
					<view class="itemText">{{listString.title}}</view>
				</view>
				<view class="intrFlexItem">
					<view class="itemText1">活动时间：{{listString.starttime}}</view>
				</view>
				<view class="intrFlexItem1" @click="cilckLocation()">
					<view class="iconfont icon-dingweixiao"></view>
					<view class="itemText2">地址</view>
					<view class="itemText3">{{listString.address}}</view>
					<view class="iconfont icon-dianpudaohang"></view>
				</view>
			</view>
		</view>

		<view class="contacts">
			<view class="contactsList">
				<view class="listLeft">负责人</view>
				<view class="listRight">{{listString.principal}}</view>
			</view>
			<view class="contactsList">
				<view class="listLeft">联系电话</view>
				<view class="listRight">{{listString.mobile}}</view>
			</view>
			<view class="contactsList">
				<view class="listLeft">招募时限</view>
				<view class="listRight">{{listString.deadline}}截止</view>
			</view>
			<view class="contactsList">
				<view class="listLeft">招募人数</view>
				<view class="listRight">{{listString.crew_num}}人</view>
			</view>
			<view class="contactsList">
				<view class="listLeft">活动时间</view>
				<view class="listRight">{{listString.duration}}小时</view>
			</view>
			<view class="contactsList">
				<view class="listLeft">活动安排</view>
				<view class="listRight">
					<u-parse :html="listString.content"></u-parse>
				</view>
			</view>
		</view>

		<view class="consult" @click="signIn()" v-if="type == 1">
			<view style="width: 100%;margin-top: 10rpx;">点击</view>
			<view style="width: 100%;margin-bottom: 10rpx;">签到</view>
		</view>
		<view class="zw"></view>
		<view class="footer">
			<view class="footerBtn" @click="entry()">立即报名</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				type: 0,
				bannerList: [],
				listString: {
					address: '',
					content: '',
					crew_num: '',
					duration: '',
					mobile: '',
					latitude: "",
					longitude: "",
					mobile: "",
					principal: "",
					starttime: "",
					title: "",
					id: '',
					starttime: '',
					deadline: ''
				}
			}
		},
		onLoad(e) {

			this.postDetail(e.id)
			if (e.type) {
				this.type = e.type
			}
		},
		methods: {
			async entry() {
				let state = await uni.request({url: '/addons/volunteer/api.userapply/info',data: {type: 5},method: 'POST'});
				console.log(state)
				if(!state[1].data) return this.$wanlshop.msg(state[1].msg)
				let array = ['您当前正在审核中,请耐心等待','审核通过','审核失败,请查看具体原因']
				if(state[1].data.state != 1) {
					this.$wanlshop.msg(array[state[1].data.state])
					setTimeout(() => {
						this.$wanlshop.to(`/pages/volunteer/apply`)
					}, 1000);
					return false;
				}
				uni.request({
					url: '/addons/volunteer/api.apply/index',
					data: {
						activity_id: this.listString.id
					},
					method: 'POST',
					success: res => {
						uni.showToast({
							title: '报名成功',
							icon: 'none',
							position: true
						});
					},
					fail: (err) => {
						console.log(err)
					}
				});
			},
			signIn() {
				// 只允许通过相机扫码
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						uni.request({
							url: '/addons/volunteer/api.activity/scancode',
							data: res.result,
							method: 'POST',
							success: res => {
								console.log("签到",res)
								uni.showToast({
									title: res.msg,
									icon: 'none',
									position: true
								});
							}
						});
					}
				});

			},
			// 导航
			cilckLocation() {
				console.log(this.listString)
				var that = this;
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						const latitude = Number(that.listString.latitude);
						const longitude = Number(that.listString.longitude);
						uni.openLocation({
							name: that.listString.address,
							latitude: latitude,
							longitude: longitude,
							success: function() {
								console.log('success');
							}
						});
					}
				});
			},

			async postDetail(id) {
				await uni.request({
					url: '/addons/volunteer/api.activity/detail',
					data: {
						activity_id: id
					},
					method: 'POST',
					success: res => {
						console.log("详情", res)
						this.bannerList = res.data.image
						this.listString = res.data
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #ededed;
		height: 100%;
	}

	.wanlshop-container {
		background-repeat: no-repeat;

		&__head {
			position: relative;
			z-index: 99;

			.navigater {
				height: 86rpx;
				padding-left: 25rpx;
				padding-right: 25rpx;
				/* #ifdef MP */
				padding-right: 220rpx;

				/* #endif */
				.search {
					flex: 1;
					background-color: transparent;
					height: 66rpx;
					border: 2rpx solid #fff;

					.icon {
						margin: 0 20rpx;
						color: #fff;
					}

					swiper {
						height: 100%;
						width: 100%;
						margin-right: 10rpx;

						swiper-item {
							display: flex;
							align-items: center;
						}
					}
				}
			}

		}

	}

	.wanlshop-container__head .navigater .search {
		border: 3rpx solid #4CBD66;
	}

	.wanl-list .bar {
		background-color: #fff;
		margin: 20rpx 0;
		justify-content: space-around;
	}

	.banner {
		width: 100%;
		height: 422rpx;
	}

	.intr {
		padding: 0 30rpx;
		background: #fff;
		height: auto;

		.intrFlex {
			width: 100%;
			height: auto;

			.intrFlexItem {
				display: flex;
				padding-top: 12rpx;

				.itemLeft {
					width: 184rpx;
					height: 42rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #4CBD66;
				}

				.itemText {
					width: 496rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.itemText1 {
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #777777;
				}
			}

			.intrFlexItem1 {
				display: flex;
				width: 100%;
				height: auto;
				padding: 16rpx 0;
				align-items: center;
				border-top: 1rpx solid #f3f3f3;
				margin-top: 14rpx;

				.icon-dingweixiao {
					color: #4CBD66;
					font-size: 26rpx;
				}

				.itemText2 {
					font-size: 26rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #4CBD66;
					margin-left: 8rpx;
				}

				.itemText3 {
					width: 520rpx;
					height: auto;
					margin-left: 16rpx;
					font-size: 26rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #555555;
				}

				.icon-dianpudaohang {
					margin-left: auto;
				}

			}
		}
	}

	.contacts {
		padding: 0 30rpx;
		background: #fff;
		margin-top: 20rpx;

		.contactsList {
			width: 100%;
			height: auto;
			padding: 30rpx;
			border-bottom: 1rpx solid #dcdcdc;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.listLeft {
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.listRight {
				width: 500rpx;
				text-align: right;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #777777;
			}
		}
	}

	.zw {
		width: 100%;
		height: 206rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 136rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		background: #fff;

		.footerBtn {
			width: 504rpx;
			height: 64rpx;
			background: #4CBD66;
			border-radius: 10rpx;
			text-align: center;
			line-height: 64rpx;
			margin: 30rpx auto;
			color: #fff;
		}
	}

	.consult {
		width: 100rpx;
		height: 100rpx;
		background: #4CBD66;
		border-radius: 100%;
		text-align: center;
		color: #fff;
		position: fixed;
		right: 10rpx;
		top: 50%;
		font-size: 22rpx;
		z-index: 99;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}
</style>